<template>
  <div :style="bg" class="bg">
    <div class="box">
      <img class="bgimg" :src="shop.avatar" alt="" />
      <div class="header">
        <img :src="shop.avatar" alt="1" />
        <div class="remarks">
          <p><span class="brand">品牌</span>{{ shop.name }}</p>
          <p class="second">
            {{ shop.description }} / {{ shop.deliveryTime }}分钟送达
          </p>
          <p v-if="shop.supports" class="third">
            <span class="reduce">减</span>
            {{ shop.supports[0] }}
            <span class="num" @click="openFrame">
              {{ shop.supports.length }}个<i class="iconfont icon-you"></i>
            </span>
          </p>
        </div>
      </div>
      <div class="notice" @click="openFrame">
        <span class="ni">公告</span>{{ shop.bulletin }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["header"],

  data() {
    return {
      shop: {},
      bg: {},
    };
  },
  methods: {
    openFrame() {
      this.$emit("openFrame");
    },
  },
  watch: {
    header(value) {
      this.shop = value;
      // this.bg = { backgroundImage: "url(" + this.shop.avatar + ")" };
    },
  },
};
</script>

<style lang="less" scoped>
.bgimg {
  filter: blur(6px);
  position: absolute;
  z-index: -3;
  height: 100%;
  width: 100%;
}

.box {
  overflow: hidden;
  position: relative;
  //   background-color: rgb(0, 189, 31);
  background-color: rgba(0, 0, 0, 0.5);
}
.header {
  height: 130px;
  display: flex;
  padding-top: 20px;
  img {
    width: 80px;
    height: 80px;
    margin-left: 20px;
  }
  .remarks {
    height: 85px;
    margin-left: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
    p {
      color: #fff;
      font-size: 16px;
      display: flex;
    }
    .brand {
      background-color: rgb(255, 0, 0);
      padding: 3px;
      margin-left: 5px;
      font-size: 12px;
      margin-right: 5px;
    }

    .reduce {
      background-color: #fff;
      color: red;
      font-size: 12px;
      padding: 3px 4px;
      font-weight: bold;
      margin-right: 5px;
    }
  }
}
.notice {
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  line-height: 40px;
  padding-left: 15px;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  .ni {
    font-size: 12px;
    background-color: #fff;
    padding: 5px 10px;
    color: #000;
    border-radius: 12px;
    margin-right: 10px;
  }
}
.third {
  position: relative;
  width: 100%;
  .num {
    position: absolute;
    right: 20px;
    font-size: 12px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px;
    border-radius: 15px;
    i {
      font-size: 12px;
    }
  }
}
</style>